﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#templates">
    <CodeSnippetTabPage Text="Razor">@(@"<DxDataGrid Data=""@DataSource""
            RowRemoving=""@((dataItem) => OnRowRemoving(dataItem))""
            RowUpdating=""@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))""
            RowInserting=""@((newValues) => OnRowInserting(newValues))""
            CssClass=""mw-1100"">

    <DxDataGridCommandColumn Width=""150px""></DxDataGridCommandColumn>

    <DxDataGridColumn Field=""@nameof(Product.ProductName)"" Caption=""Product Name"">
    </DxDataGridColumn>

    <DxDataGridColumn Field=""@nameof(Product.Availability)"" Caption=""Availability"" Width=""150px"">
        <DisplayTemplate>
            @{
                var id = Guid.NewGuid().ToString();
                var inStock = (context as Product).Availability;
                <DxCheckBox Id=@""@id"" Checked=""@inStock"" Enabled=""false"">
                    @if(inStock) {
                    <label class=""form-check-label text-success"" for=""@id""><span>In stock</span></label>
                    } else {
                    <label class=""form-check-label text-danger"" for=""@id""><span>Sold out</span></label>
                    }
                </DxCheckBox>
            }
        </DisplayTemplate>
        <EditTemplate>
            <DxComboBox Data=""@(new List<string>() { ""In stock"", ""Sold out"" })""
                        Value=""@(((bool)((CellEditContext)context).CellValue) ? ""In stock"" : ""Sold out"" )""
                        ValueChanged=""@(newCellValue => ((CellEditContext)context).OnChanged(newCellValue == ""In stock""))"">
            </DxComboBox>
        </EditTemplate>
    </DxDataGridColumn>

    <DxDataGridColumn Field=""@nameof(Product.ProductCategoryId)"" Caption=""Category"">
        <DisplayTemplate>
            @{
                var product = context as Product;
                int currentCellValue = (int)product.ProductCategoryId;
                var nestedItem = NestedDataSource.Where(x => x.SubcategoryID == currentCellValue).FirstOrDefault();
                string category = nestedItem != null ? nestedItem.Category.ToString() : ""none"";
                string subcategory = nestedItem != null ? nestedItem.Subcategory : ""none"";
                <span>@category/@subcategory</span>
            }
        </DisplayTemplate>
        <EditTemplate>
            @{
                var cellEditContext = (CellEditContext)context;
                int currentCellValue = (int)cellEditContext.CellValue;
                var nestedItem = NestedDataSource.Where(x => x.SubcategoryID == currentCellValue).FirstOrDefault();
            }
            <DxDataGrid Data=""@NestedDataSource""
                        PageSize=""5""
                        SingleSelectedDataRow=""@nestedItem""
                        SingleSelectedDataRowChanged=""@(newCellValue => cellEditContext.OnChanged(newCellValue.SubcategoryID))"">
                <DxDataGridColumn Field=""@nameof(ProductCategory.SubcategoryID)"" Width=""150px""></DxDataGridColumn>
                <DxDataGridColumn Field=""@nameof(ProductCategory.Category)"" Width=""150px""></DxDataGridColumn>
                <DxDataGridColumn Field=""@nameof(ProductCategory.Subcategory)"" Width=""150px""></DxDataGridColumn>
                <DxDataGridColumn Field=""@nameof(ProductCategory.LastUpdated)"" Width=""150px""></DxDataGridColumn>
            </DxDataGrid>
        </EditTemplate>
    </DxDataGridColumn>

</DxDataGrid>")</CodeSnippetTabPage>
</CodeSnippetTabbed>
